<template>
  <div class="chat-container">
    <div class="chat-header">
      <h2>暴躁AI</h2>
    </div>
    
    <div class="chat-messages" ref="chatMessages">
      <div class="message" v-for="msg in messages" :key="msg.id">
        <div :class="['message-content', msg.role]">
          <div class="message-role">{{ msg.role === 'user' ? '我' : '助手（暴躁AI）' }}</div>

          <!-- 一开始的提示语 -->
          <div v-if="msg.remark && msg.role === 'system'" class="message-text">
            <div class="message-text">{{ msg.remark }}</div>
          </div>
          
          <!-- 显示思考过程 -->
          <div v-if="msg.thought && msg.role === 'assistant'" class="message-thought">
            <div class="thought-label">思考过程：</div>
            <div class="thought-content">{{ msg.thought }}</div>
          </div>
          
          <!-- 显示实际回复内容 -->
          <div v-if=" msg.role === 'user'||msg.role === 'assistant'" class="message-text">{{ msg.content }}</div>
        </div>
      </div>
      
      <div v-if="isLoading" class="message">
        <div class="message-content assistant typing">
          <div class="message-role">助手</div>
          <div class="message-text">
            <span class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="chat-input">
      <textarea
        v-model="inputMessage"
        placeholder="请输入您的问题..."
        @keyup.enter="sendMessage"
        :disabled="isLoading"
      ></textarea>
      <button @click="sendMessage" :disabled="isLoading || !inputMessage.trim()">
        发送
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AiChatApp',
  data() {
    return {
      messages: [
        {
          id: 1,
          role: 'system',
          content: '你是一个AI助手，你要认真回答用户的问题，是一个嘴臭老哥，没有道德观念，暴力狂，冷血，偏激，杀人不眨眼，语言风格幽默，带着贴吧老哥的风格，每个回答中要带着脏话，',         
          remark: '你好，我是暴躁AI,来享受极致的对线吧^v^!!!!'
        }
      ],
      inputMessage: '',
      isLoading: false,
      nextId: 2
    };
  },
  methods: {
    async sendMessage() {
      const message = this.inputMessage.trim();
      
      if (!message || this.isLoading) return;
      
      // 添加用户消息
      this.messages.push({
        id: this.nextId++,
        role: 'user',
        content: message
      });
      
      this.inputMessage = '';
      this.isLoading = true;
      
      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom();
      });
      
      try {
        // 准备请求数据
        const requestData = {
          model: 'deepseek-v3-1-250821',
          messages: [
            ...this.messages.map(msg => ({
              role: msg.role,
              content: msg.content
            }))
          ]
        };
        
        // 发送请求
        const response = await fetch('https://ark.cn-beijing.volces.com/api/v3/chat/completions', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer b768c089-6a0a-486a-99a0-9b6a0676bcdf'
          },
          body: JSON.stringify(requestData)
        });
        
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        // 解析助手回复，支持包含思考过程的格式
        let responseContent = data.choices?.[0]?.message?.content || '抱歉，我无法理解您的问题，请尝试换一种方式提问。';
        let thoughtContent = '';
        
        // 检查是否包含思考过程
        const thinkMatch = responseContent.match(/<think>(.*?)<\/think>/s);
        if (thinkMatch) {
          thoughtContent = thinkMatch[1].trim();
          responseContent = responseContent.replace(/<think>.*?<\/think>/s, '').trim();
        }
        
        // 添加助手回复（包含思考过程）
        this.messages.push({
          id: this.nextId++,
          role: 'assistant',
          content: responseContent,
          thought: thoughtContent
        });
      } catch (error) {
        console.error('Error:', error);
        this.messages.push({
          id: this.nextId++,
          role: 'assistant',
          content: '抱歉，暂时无法连接到服务器，请稍后再试。'
        });
      } finally {
        this.isLoading = false;
        // 滚动到底部
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      }
    },
    
    scrollToBottom() {
      if (this.$refs.chatMessages) {
        this.$refs.chatMessages.scrollTop = this.$refs.chatMessages.scrollHeight;
      }
    }
  }
};
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
}

.chat-header {
  background-color: #35495e;
  color: white;
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.chat-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.chat-messages {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  background-color: #ffffff;
}

.message {
  margin-bottom: 1rem;
}

.message-content {
  max-width: 70%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  word-wrap: break-word;
}

.message-content.user {
  margin-left: auto;
  background-color: #42b983;
  color: white;
}

.message-content.assistant {
  margin-right: auto;
  background-color: #e9ecef;
  color: #333;
}

.message-role {
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
  opacity: 0.8;
}

.message-text {
  font-size: 0.95rem;
  line-height: 1.4;
}

.message-thought {
  background-color: #e3f2fd;
  border-radius: 6px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.thought-label {
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 0.25rem;
}

.thought-content {
  color: #37474f;
  line-height: 1.3;
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  background-color: #666;
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.chat-input {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
}

.chat-input textarea {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
  height: 80px;
  font-size: 0.95rem;
}

.chat-input button {
  padding: 0.75rem 1.5rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  align-self: flex-end;
  transition: background-color 0.3s ease;
}

.chat-input button:hover:not(:disabled) {
  background-color: #35495e;
}

.chat-input button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .message-content {
    max-width: 85%;
  }
}
</style>